<template>
  <a-modal :title="title" v-model="show" :maskClosable="false" :width="1050" placement="right" :closable="true"
    @cancel="onClose" :footer="null" :visiable="bankCodeOperationVisiable">
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="银行网点联行号" v-bind="formItemLayout">
            <a-input v-decorator="['bankBranchCode', { rules: [{ required: true, message: '必填' }] }]"
              :disabled="this.isUpd" />
          </a-form-item>

          <a-form-item label="id" v-bind="formItemLayout" style="display: none">
            <a-input v-decorator="['id']" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="银行网点名称" v-bind="formItemLayout">
            <a-input v-decorator="['bankBranchName', { rules: [{ required: true, message: '必填' }] }]"
              :disabled="this.isUpd" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="银行名称" v-bind="formItemLayout">
            <a-input v-decorator="['bankName', { rules: [{ required: true, message: '必填' }] }]" :disabled="this.isUpd" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="所属省份" v-bind="formItemLayout">
            <a-select show-search placeholder="省" option-filter-prop="children" style="width: 100%"
              :filter-option="filterOption" @focus="selectProvince" :disabled="this.isUpd"
              v-decorator="['regionCode', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-for="d in provinceData" :key="d.id">
                {{ d.id }}-{{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="网联机构号" v-bind="formItemLayout">
            <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择"
              option-filter-prop="children" :filter-option="filterOption" :disabled="this.isUpd"
              @focus="selectNuccInstIdData" @search="selectNuccInstIdData"
              v-decorator="['nuccInstId', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-for="(d, index) in nuccInstIdData" :key="d.id">
                {{ d.id }}-{{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label="银联机构号" v-bind="formItemLayout">
            <a-select mode="default" :allowClear="true" style="width: 100%" show-search placeholder="请选择"
              option-filter-prop="children" :filter-option="filterOption" :disabled="this.isUpd"
              @focus="selectCupsInstIdData" @search="selectCupsInstIdData"
              v-decorator="['cupsInstId', { rules: [{ required: true, message: '必填字段' }] }]">
              <a-select-option v-for="(d, index) in cupsInstIdData" :key="d.id">
                {{ d.id }}-{{ d.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="城商银行清算中心机构号" v-bind="formItemLayout">
            <a-input v-decorator="['ccfccbInstId']"
              :disabled="this.isUpd" />
          </a-form-item>
        </a-col>
      </a-row>

      <br>

    </a-form>
    <div class="drawer-bootom-button" v-show="this.title !== '查看联行号'">
      <a-button @click="onClose" type="primary">取消</a-button>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
}
export default {
  name: 'BankCodeOperation',
  props: {
    bankCodeOperationVisiable: {
      default: false
    },
    instId: '',
  },
  data() {
    return {
      title: '新增联行号',
      isStop: false,
      isCancel: false,
      isUpd: false,
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      validateStatus: '',

      provinceData: [],
      nuccInstIdData: [],
      cupsInstIdData: [],
      info: {},

    }
  },
  computed: {
    show: {
      get: function () {
        return this.bankCodeOperationVisiable
      },
      set: function () {
      }
    }
  },
  mounted() {

  },

  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    selectProvince() {
      this.provinceData = []

      let l = '01'
      this.$get('/admin/merParam/regionInfo/select2', { l: l }).then((r) => {
        let result = r.data
        result.forEach(r => {
          this.provinceData.push(r);
        })
      })
    },

    selectNuccInstIdData(val) {
      this.nuccInstIdData = []
      let param = {}
      if (val) {
        param = {
          q: encodeURIComponent(val),
          pageSize: 20
        }
      } else {
        param = {
          q: '',
          pageSize: 20
        }
      }
      this.$get('/admin/merParam/nuccInstInfo/select2', param).then((r) => {
        let result = r.data.results
        result.forEach(r => {
          this.nuccInstIdData.push(r);
        })
      })

    },

    selectCupsInstIdData(val) {
      this.cupsInstIdData = []
      let param = {}
      if (val) {
        param = {
          q: encodeURIComponent(val),
          pageSize: 20
        }
      } else {
        param = {
          q: '',
          pageSize: 20
        }
      }
      this.$get('/admin/merParam/cupsInstInfo/select2', param).then((r) => {
        let result = r.data.results
        result.forEach(r => {
          this.cupsInstIdData.push(r);
        })
      })

    },

    reset() {
      this.loading = false
      this.isCancel = false
      this.isUpd = false
      this.isStop = false
      this.title = '新增联行号'
      this.form.resetFields()
    },
    onClose() {
      this.reset()
      this.$emit('close')
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.setInfoFields()
          this.loading = true
          this.info.instId = this.instId

          if (this.title == '新增联行号') {
            this.info.optFlag = 'add'
          } else if (this.title == '修改联行号') {
            this.info.optFlag = 'upd'
          } else if (this.title == '注销联行号') {
            this.info.optFlag = 'cancel'
          }

          if (this.title == '新增联行号') {
            this.$post('/admin/merParam/bankCodeInfo', {
              ...this.info
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          } else if (this.title == '修改联行号') {
            this.$put('/admin/merParam/bankCodeInfo/update', {
              ...this.info
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          } else {
            this.$put('/admin/merParam/bankCodeInfo/cancel', {
              ...this.info
            }).then((r) => {
              this.reset()
              this.$emit('success')
            }).catch(() => {
              this.loading = false
            })
          }

        }
      })
    },

    setInfoFields() {
      let values = this.form.getFieldsValue(['id', 'bankBranchCode', 'bankBranchName', 'bankName',
        'regionCode', 'nuccInstId', 'cupsInstId', 'ccfccbInstId'])
      if (typeof values !== 'undefined') {
        Object.keys(values).forEach(_key => {
          this.info[_key] = values[_key]
        })
      }
    },

    setBankCodeFormValues({ ...info }) {
      let fields = ['id', 'bankBranchCode', 'bankBranchName', 'bankName', 'regionCode', 'nuccInstId', 'cupsInstId', 'ccfccbInstId']
      if (info.operation == 'cancel') {
        this.isCancel = true
        this.isUpd = true
        this.title = '注销联行号'
      } else if (info.operation == 'view') {
        this.isUpd = true
        this.title = '查看联行号'
      } else {
        this.title = '修改联行号'
      }
      Object.keys(info).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key)
          let obj = {}
          obj[key] = info[key]
          this.form.setFieldsValue(obj)
        }
      })
    },

  }

}
</script>




